<!--
 * @Author: wanglianxin 532445330@qq.com
 * @Date: 2023-11-08 18:58:19
 * @LastEditors: wanglianxin 532445330@qq.com
 * @LastEditTime: 2023-11-10 15:02:26
 * @FilePath: /src/components/Header/Header.vue
 * @Description: 项目头部
-->
<template>
  <div class="header">
    公共组件管理平台
    <div class="fr" style="height: 55px; line-height: 55px">
      <el-icon @click="drawer = true">
        <Grid class="cursor-pointer handle-color" />
      </el-icon>
      <el-drawer
        v-model="drawer"
        title="主题颜色设置"
        append-to-body
        class="handle-theme-container"
      >
        <ul>
          <li v-for="(item, index) in themeList" :key="index">
            <el-row>
              <el-col :span="4"> {{ item.name }}： </el-col>
              <el-col :span="20">
                <el-color-picker v-model="item.color"></el-color-picker>
                <span>{{ item.color }}</span>
              </el-col>
            </el-row>
          </li>
        </ul>
        <p>
          <el-button @click="submit" type="primary">提交</el-button>
        </p>
      </el-drawer>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, Ref, computed, watch } from "vue";
import { useColorStore } from "../../store/color.ts";
import { Grid } from "@element-plus/icons-vue";
const colorStore = useColorStore();
import { useDark, useToggle } from "@vueuse/core";

//控制主题
const drawer = ref<Boolean>(false);
//系统主题
const isDark = useDark();
interface ThemeItem {
  name: string;
  type: string;
  color: string;
}
const themeList = reactive<ThemeItem[]>([
  {
    name: "主题颜色",
    type: "primary",
    color: "#409EFF",
  },
  {
    name: "成功颜色",
    type: "success",
    color: "#67C23A",
  },
  {
    name: "警告颜色",
    type: "warning",
    color: "#E6A23C",
  },
  {
    name: "危险颜色",
    type: "danger",
    color: "#F56C6C",
  },
  {
    name: "错误颜色",
    type: "error",
    color: "#f56c6c",
  },
  {
    name: "信息颜色",
    type: "info",
    color: "#909399",
  },
]);
const submit = () => {
  const themes = themeList.map((item) => {
    return [item.type, item.color];
  });
  colorStore.setThemeColor(themes, isDark.value ? "darken" : "lighten");
  drawer.value = false;
};
watch(isDark, () => {
  submit();
});
</script>
<style scoped lang="scss">
.header {
  position: relative;
  z-index: 9;
  padding: 0 24px;
  background-image: linear-gradient(
    to right,
    var(--el-color-primary-light-7),
    var(--el-color-primary)
  );
  backdrop-filter: saturate(50%) blur(4px);
  -webkit-backdrop-filter: saturate(50%) blur(4px);
  font-size: 20px;
  color: var(),
}
.handle-theme-container {
  ul {
    li {
      height: 50px;
      line-height: 50px;
      span {
        margin-left: 20px;
      }
    }
  }
  p {
    margin-top: 20px;
  }
}
</style>
